<template>
  <div>
    <el-drawer
      title="配置子卡"
      :before-close="handleClose"
      :visible="SonCardConfigDialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="40%"
    >
      <div class="demo-drawer__content">
        <el-form
          :model="sonCardForm"
          ref="sonCardFormRef"
          :rules="sonCardFormRule"
          label-position="top"
        >
          <h3>主卡余额：{{ ParentAmt }} 元</h3>
          <el-form-item
            label="子卡额度"
            :label-width="formLabelWidth"
            prop="secondaryCardAllocationType"
          >
            <el-radio-group v-model="sonCardForm.secondaryCardAllocationType">
              <el-radio label="1">共享主卡额度</el-radio>
              <el-radio label="2">手动分配子卡额度</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  setSonCardAllocationTypeApi,
  getParentCardInfoApi,
} from "@/api/teamCard/teamCardList";
export default {
  name: "teamConfigSonCard",
  props: {
    SonCardConfigDialog: {
      type: Boolean,
      default: false,
    },
    currentData: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    SonCardConfigDialog(val) {
      if (val) {
        // 获取主卡信息
        console.log(val);
        this.getParentCardInfo();
      }
    },
  },
  data() {
    return {
      sonCardForm: {
        secondaryCardAllocationType: "1", // 额度分配方式：0.未设置；1.共享主卡额度 2.手动分配子卡额度
      },
      ParentAmt: 0,
      formLabelWidth: "100px",
      sonCardFormRule: {
        secondaryCardAllocationType: [
          { required: true, message: "请选择类型", trigger: "change" },
        ],
      },
    };
  },
  created() {
    console.log(this);
  },
  methods: {
    // 确定提交
    handleSubmit() {
      this.$refs.sonCardFormRef.validate((valid) => {
        if (valid) {
          console.log("submit");
          let params = {
            allocationType: this.sonCardForm.secondaryCardAllocationType,
            id: this.currentData.id,
          };
          setSonCardAllocationTypeApi(params).then((res) => {
            this.msgSuccess("配置子卡成功");
            this.$emit("update:SonCardConfigDialog", false);
            this.$emit("reloadData");
          });
        } else {
          console.log("error submit");
        }
      });
    },
    handleClose() {
      this.$emit("update:SonCardConfigDialog", false);
    },

    // 获取主卡信息 : 主卡余额， 子卡分配方式
    getParentCardInfo() {
      let id = this.currentData.id;
      getParentCardInfoApi(id).then((res) => {
        this.ParentAmt = res.data.balance || 0;
        this.sonCardForm.secondaryCardAllocationType =
          res.data.secondaryCardAllocationType + "";
      });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .demo-drawer {
  overflow: auto;
  .el-drawer__header {
    padding-bottom: 20px;
    border-bottom: 1px solid #999;
  }
  .el-drawer__body {
    padding: 20px;

    .demo-drawer__content {
      h3 {
        margin-bottom: 30px;
      }
      .demo-drawer__footer {
        text-align: end;
      }
    }
  }
}
</style>
